import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { NavBar, List, TextArea, Button, Toast } from 'antd-mobile';

const ComplaintDetailPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { reason } = location.state || { reason: '未知类型' };

  const handleSubmit = () => {
    Toast.show({ icon: 'success', content: '投诉已提交' });
    // 通常会跳转回列表页或关闭页面
    setTimeout(() => navigate('/app/message', { replace: true }), 1500);
  };

  return (
    <div style={{ backgroundColor: '#f7f8fa', height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <NavBar onBack={() => navigate(-1)} style={{'--border-bottom': '1px solid #eee'}}>投诉详情</NavBar>

      <div style={{ flex: 1, overflowY: 'auto', padding: '12px' }}>
        <List header="投诉类型">
          <List.Item>{reason}</List.Item>
        </List>

        <List header="投诉理由" style={{marginTop: '12px'}}>
          <List.Item>
            <TextArea 
              placeholder="请详细描述您遇到的问题" 
              rows={5} 
              style={{ 
                '--border': '1px solid #f0f0f0',
                '--border-radius': '4px',
                padding: '8px',
                width: '100%'
              }}
            />
          </List.Item>
        </List>
      </div>

      <div style={{ padding: '12px', backgroundColor: '#f7f8fa' }}>
        <Button block color="success" size="large" onClick={handleSubmit} style={{'--border-radius': '8px'}}>
          提交投诉
        </Button>
      </div>
    </div>
  );
};

export default ComplaintDetailPage;
